<!-- prettier-ignore -->
<template>
  <div class="task-batch">
    <div class="query-box">
      <el-input placeholder="任务名称" size="small" style="width: 300px;margin-right:10px">
        <el-button slot="append" icon="el-icon-search" type="primary"></el-button>
      </el-input>

    </div>
    <el-table :data="tableData" border header-row-class-name="table-header" stripe>
      <el-table-column align="center" label="序号" type="index" width="50"></el-table-column>
      <el-table-column align="center" label="任务批次">
        <template slot-scope="{row}">
          <span>{{row.name}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="创建时间" prop="createTime"></el-table-column>
      <el-table-column align="center" label="更新时间" prop="updateTime"></el-table-column>
      <el-table-column align="center" label="剩余问题地址数量">
        <template slot-scope="{row}">
          <span>{{row.unpass}}条</span>
        </template>
      </el-table-column>
      <!--<el-table-column align="center" label="操作">-->
      <!--  <template>-->
      <!--    <el-button type="text">任务下发</el-button>-->
      <!--  </template>-->
      <!--</el-table-column>-->
    </el-table>
    <el-pagination :page-size="queryParams.size" :total="total" background layout="total,prev, pager, next" style="text-align: right;margin-top: 10px"></el-pagination>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'taskBatch',
  data(){
    return{
      total:0,
      tableData:[],
      queryParams:{
        page:1,
        size: 10,
        type:2
      }
    }
  },
  created(){
    this.getTaskData()
  },
  methods:{
    async getTaskData(){
      try {
        const res = await axios.get(`${window.baseUrl}/address/task/list`,{
          params:this.queryParams
        })
        this.tableData = res.data.data.records
        this.$emit('setID',this.tableData[0].id)
        this.total = res.data.data.total
      }catch(err){
        console.error(err);
      }
    }
  }
};
</script>

<style lang="less" scoped>
.task-batch{
  .query-box{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px
  }
}
</style>